<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>声明方法</h1>
    <p>count: {{ count }}</p>
    <button v-on:click="fn">count++</button>
    <button v-on:click="fn2">count++</button>
    <button v-on:click="fn3">count + 2</button>
  </div>

  <script src="../Vue.js"></script>

  <script>
  const { createApp } = Vue
  
  // 要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象
  // methods里面的函数，也会挂载到实例的顶层，所以也可以用this.fn()去直接调用
  // data的变量的名字，不能和methods里面的函数的名字相同

  // methods里面都只能使用普通函数，使用箭头函数会导致this指向错误
  createApp({
    data() {
      return {
        count: 1,
      }
    },
    methods: {
      fn() {
        this.count++;
      },
      fn2() {
        this.fn()
      },
      // fn3: () => {
        // console.log(123);
        // this.count = this.count + 2
      // }s
    }
  }).mount('#app')
</script>
</body>
</html>